<template>
	<view class="container">
		<view class="price-box">
			<text>支付金额</text>
			<text class="price">{{model.paymentAmount}}</text>
		</view>
		
		<view class="pay-type-list">
			<view v-for="(item,index) in paymentList" :key="index" class="list-box" @click="changePayment(item)">
				<text v-if="item.providerType===1" class="icon iconfont icon-balance"></text>
				<text v-if="item.providerType===2" class="icon iconfont icon-weixin"></text>
				<text v-if="item.providerType===3" class="icon iconfont icon-alipay"></text>
				<view class="content">
					<text class="tit">{{item.title}}</text>
					<text>{{item.remark}}</text>
				</view>
				<label class="radio">
					<radio color="#fa436a" :checked='model.paymentId == item.id' /></radio>
				</label>
			</view>
		</view>
		
		<view class="foot-box">
			<text class="btn-submit" @click="confirm">确认支付</text>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				paymentList: [], //支付方式列表
				paymentModel: {}, //当前支付方式
				model: {}, //收款单
			}
		},
		methods: {
			//初始化数据
			async initData(no){
				let _this = this;
				//正在加载
				uni.showLoading({
				    title: '加载中'
				});
				//加载收款信息
				await _this.loadData(no);
				
				//根据环境加载支付列表
				let sendUrl=`/client/payment/view/10`;
				//#ifdef APP-PLUS
				sendUrl+=`?types=app`;
				//#endif
				//#ifdef H5
				//判断是否在微信浏览器里打开
				let ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					sendUrl+=`?types=jsapi`;
				}else{
					sendUrl+=`?types=h5`;
				}
				//#endif
				//#ifdef MP
				sendUrl+=`?types=mp`;
				//#endif
				//如果非充值则加载余额支付
				if(_this.model.tradeType==0){
					sendUrl+=`,balance`;
				}
				//加载支付方式列表
				await _this.$api.request({
					url: sendUrl,
				}).then(res=>{
					_this.paymentList = res.data;
				});
				
				//选中订单支付方式
				var obj = _this.paymentList.find(val => val.id===_this.model.paymentId);
				if(obj){
					_this.paymentModel = obj;
				}
				//关闭加载
				uni.hideLoading();
			},
			//加载收款信息
			async loadData(no){
				let _this = this;
				if(!no){
					uni.showModal({
						title: "错误提示",
						content: '订单参数有误，请检查重试',
						success(e) {
							uni.navigateBack();
						}
					});
					return;
				}
				await _this.$api.request({
					url: `/account/order/collection/${no}`,
				}).then(res=>{
					_this.model = res.data;
				});
				//判断是否已支付,如果是已支付则直接跳转到成功页面
				if(_this.model.status >1 ){
					uni.redirectTo({
						url: `success?no=${_this.model.tradeNo}`
					});
				}
			},
			//选择支付方式
			async changePayment(item) {
				let _this = this;
				if(_this.model.paymentId===item.id){
					return;
				}
				//修改支付方式
				await _this.$api.request({
					url: `/account/order/collection/payment`,
					method: "put",
					loading: true,
					data: {
						id: _this.model.id,
						paymentId: item.id
					}
				}).then(res=>{
					_this.model.paymentId = item.id;
					_this.paymentModel = item;
				});
			},
			//确认支付
			async confirm() {
				let _this = this;
				if(!_this.paymentModel.payType){
					_this.$api.msg('请选择付款方式');
					return;
				}
				//判断支付方式选择不同的接口
				if(_this.paymentModel.payType=="balance"){
					await _this.balancePay();
				}
				if(_this.paymentModel.payType=="app"){
					await _this.appPay();
				}
				if(_this.paymentModel.payType=="h5"){
					await _this.h5Pay();
				}
				if(_this.paymentModel.payType=="mp"){
					await _this.mpPay();
				}
				if(_this.paymentModel.payType=="jsapi"){
					await _this.jsApiPay();
				}
			},
			//余额支付
			async balancePay(){
				let _this = this;
				let pay = _this.paymentModel;
				let item = _this.model;
				//调用下单接口
				_this.$api.request({
					url: `${pay.payUrl}`,
					method: "post",
					loading: true,
					data: {
						outTradeNo: item.tradeNo
					}
				}).then(res=>{
					uni.redirectTo({
						url: `success?no=${item.tradeNo}`
					});
				});
			},
			//APP支付
			async appPay(){
				let _this = this;
				let pay = _this.paymentModel;
				let item = _this.model;
				//调用统一下单接口
				_this.$api.request({
					url: `${pay.payUrl}`,
					method: "post",
					loading: true,
					data: {
						outTradeNo: item.tradeNo,
						description: "商品订单"
					}
				}).then(res=>{
					//判断是微信还是支付宝
					let orderInfo = {};
					let provider = "";
					if(pay.providerType===2){
						provider = "wxpay";
						orderInfo = {
							appid: res.data.appId,
							partnerid: res.data.partnerId,
							prepayid: res.data.prepayId,
							package: res.data.package,
							noncestr: res.data.nonceStr,
							timestamp: res.data.timeStamp,
							sign: res.data.sign
						}
					}else{
						provider = "alipay";
						orderInfo = res.data;
					}
					
					uni.requestPayment({
						provider: provider,
						orderInfo: orderInfo,
						success(resPay) {
							uni.redirectTo({
								url: `success?no=${item.tradeNo}`
							});
						},
						fail(errPay) {
							_this.$api.msg(errPay);
						},
					});
				});
			},
			//H5支付
			async h5Pay(){
				let _this = this;
				let pay = _this.paymentModel;
				let item = _this.model;
				//获取当前页面
				let href = `${window.location.protocol}//${window.location.host}/#`;
				let uri = encodeURIComponent(href + `/pages/payment/success?no=${item.tradeNo}`);
				//调用统一下单接口
				_this.$api.request({
					url: `${pay.payUrl}`,
					method: "post",
					loading: true,
					data: {
						outTradeNo: item.tradeNo,
						description: "商品订单",
						returnUri: uri
					}
				}).then(res=>{
					let url = res.data.url;
					window.location.href=url;
				});
			},
			//小程序支付
			async mpPay(){
				let _this = this;
				let item = _this.model;
				//获取用户OpenId
				uni.login({
					provider: 'weixin',
					success(loginRes) {
						//调用统一下单接口
						_this.$api.request({
							url: `/wechatpay`,
							method: "post",
							loading: true,
							data: {
								outTradeNo: item.tradeNo,
								description: "商品订单",
								code: loginRes.code,
							}
						}).then(res=>{
							//调起支付
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: res.data.timeStamp,
								nonceStr: res.data.nonceStr,
								package: res.data.package,
								signType: res.data.signType,
								paySign: res.data.paySign,
								success(res) {
									uni.redirectTo({
										url: `success?no=${item.tradeNo}`
									});
								},
								fail(err) {
									_this.$api.msg(err);
								},
							});
						});
					}
				});
			},
			//公众号支付
			async jsApiPay(){
				let _this = this;
				let item = _this.model;
				uni.redirectTo({
					url: `authorize?no=${item.tradeNo}`
				});
			}
		},
		onLoad(options) {
			this.initData(options.no);
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.price-box {
		background: #fff;
		height: 265rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #999;
		.price{
			font-size: 50rpx;
			color: #333;
			margin-top: 12rpx;
			&:before{
				content: '￥';
				font-size: 40rpx;
			}
		}
	}
	.pay-type-list {
		margin-top: 20rpx;
		background-color: #fff;
		.list-box{
			position:relative;
			margin: 0 60rpx;
			padding: 20rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30rpx;
			min-height: 80rpx;
			border-bottom: 2rpx solid rgba($color: #e4e7ed, $alpha: 0.3);
			&.last{
				border-bottom: none;
			}
			.icon{
				width: 100rpx;
				font-size: 52rpx;
			}
			.icon-balance {
				color: #fe8e2e;
			}
			.icon-weixin {
				color: #36cb59;
			}
			.icon-alipay {
				color: #01aaef;
			}
			.content{
				flex: 1;
				display: flex;
				flex-direction: column;
				font-size: 24rpx;
				color: #999;
				.tit{
					font-size: 30rpx;
					color: #333;
					margin-bottom: 4rpx;
				}
			}
		}
	}
	.foot-box{
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 80rpx auto 30rpx;
		padding: 0 60rpx;
		.btn-submit {
			display: block;
			width: 100%;
			color: #fff;
			font-size: 30rpx;
			line-height: 80rpx;
			text-align: center;
			background: #67C23A;
			border-radius: 80rpx;
			box-shadow: 2rpx 4rpx 10rpx rgba($color: #67C23A, $alpha: 0.4);
		}
	}
</style>